import axios from '@/utils/axios.js';
import React, { useEffect, useState } from 'react';
import { duplication } from '@/utils/format.js'
import SongItem from '@/components/SongItem';
import CustomIcon from '@/components/CustomIcon';
import s from './style.less';
import { Pagination } from 'antd';

const HotPlayLists = () => {
  // 推荐列表
  const [recommendLists, setRecommendLists] = useState([]);
  // 取出数量
  const [limit, setLimit] = useState(25);



  useEffect(() => {
    getHotRecommends();
  }, [limit]);

  const getHotRecommends = async () => {
    const res = await axios.get('/personalized', {
      params: {
        limit
      }
    });
    console.log(res)
    if (res.status === 200) {
      setRecommendLists(res.data.result);
    }
  }

  return (
    <div className={s.recommendWrapper}>
      <div className={s.header}>
        <CustomIcon type="icon-huobao" className={s.icon} />
        <h3 className={s.title}>热门推荐</h3>
      </div>
      <div className={s.recommendList}>
        {
          recommendLists.map((item, index) => {
            console.log(item.id)
            return (
              <SongItem
                key={item + 'recommend' + item.id}
                pic={item.picUrl}
                name={item.name}
                countNum={item.playCount}
                copywriter={item.copywriter}
                itemId={item.id}
              />
            )
          })
        }
      </div>
    </div>
  )
}

const SongCategory = () => {
  // 推荐列表
  const [playLists, setPlayLists] = useState([]);
  // 当前选项
  const [cat, setCat] = useState('全部');
  // 分页
  const [offset, setOffset] = useState(1);
  // 取出数量
  const [limit, setLimit] = useState(25);
  // 页面
  const [page, setPage] = useState(1);

  useEffect(() => {
    getSongCategoryList();
  }, [limit, cat, offset]);

  const getSongCategoryList = async () => {
    const res = await axios.get('/top/playlist', {
      params: {
        cat,
        offset,
        limit
      }
    });

    if (res.status === 200) {
      let list = duplication(res.data.playlists);
      console.log(list)
      setPlayLists(list);
    }
  }

  const onChange = (page) => {
    getHotRecommends();
    setPage(page);
  }

  return (
    <div className={s.recommendWrapper}>
      <div className={s.header}>
        <h3 className={s.title}>新款</h3>
      </div>
      <div className={s.recommendList}>
        {
          playLists.map((item, index) => {
            return (
              <SongItem
                key={item + 'category' + item.id}
                pic={item.coverImgUrl}
                countNum={item.playCount}
                name={item.name}
                copywriter={item.tags[0]}
                itemId={item.id}
              />
            )
          })
        }
      </div>
      <Pagination
        className={s.pagination}
        current={page}
        onChange={onChange}
        total={10}
        pageSize={limit}
        showSizeChanger={false}
      />
    </div>
  )
}

const PlayLists = () => {
  return (
    <div className={s.playlistWrapper}>
      <HotPlayLists />
      <SongCategory />
    </div>
  )
}

export default PlayLists;